
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>七牛云上传代码</title>
    <script src="../../res/js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div style="width: 80%;text-align: center;">
    <div>七牛云文件上传</div> <br/>
    <input type="file" /><button id="sub">确定上传</button>
    <img id="mypic" width="200px" height="200px" src=""/>
    <div style="margin-left: auto;margin-top:100px;">图片地址:<input type="text" id="imgUrl" style="width:300px;height: 40px;"></div>
</div>
</body>
<!--页面共同的CSS，JS-->
<script src="../../res/js/common/commonCssJS.js"></script>
<script>
    //七牛token 七牛云平台安全标识
    var qiniutoken = '';
    //七牛云图片base64格式上传地址
    var uploadUrl = "http://upload.qiniup.com/putb64/-1";
    //需要上传的图片内容 base64格式
    var imgStr = '';

    //七牛云平台 配置的域名
    var urlHeader = "https://img3.odancool.com/";
    function getDetail () {
        let data = {
            'markid':'3b70887e5d841ff8ab7388ea5f41a5af',
            'toyid':'23288'
        };
        getData('post','/niu/apiv4/niu_catedetail.php',data,function (data) {
            console.log(data);
            qiniutoken = data.token
        })
    }
    getDetail();

    //上传图片
    function uploadImg() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", uploadUrl, true);
        //文本类型
        xhr.setRequestHeader("Content-Type", "application/octet-stream");
        //七牛认证信息 注意空格
        xhr.setRequestHeader("Authorization", "UpToken " + qiniutoken);
        xhr.send(imgStr);
        //监听状态
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                var result = xhr.responseText;
                console.log('上传请求结果数据:' + result);
                result = JSON.parse(result);
                $("#mypic").attr("src", urlHeader + result.hash);
                $("#imgUrl").val(urlHeader + result.hash);
            }
        }

    }

    //将图片转为base64格式的字符串
    $('input[type=file]').on('change', function() {
        var reader = new FileReader();
        //filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一个图片文件转化为base64的码
        reader.readAsDataURL(this.files[0]);
        reader.onload = function(e) {
            //或者 e.target.result都是一样的，都是base64码
            imgStr = reader.result.split(',')[1];
            console.log('需要上传的base64格式图片:' + imgStr);
            uploadImg();
        }
    });


    // //开始上传
    // $("#sub").click(function(){
    //     //获取最新token
    //     // qnToken();
    //     uploadImg();
    // });

</script>

</html>